import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import _ from 'lodash';

import { dom, useQuasar } from '@teld/q-components';
import QTabs, { QTab } from "@teld/q-components/Tabs"

export default defineComponent({
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    modelValue: String,
  },
  emits: ['update:modelValue'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();



    const modelValue = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        emit('update:modelValue', value);
      },
    });

    return () => {
      return (
        <>
          <QTabs
            breakpoint={false}
            v-model={modelValue.value}
            align='left'
            active-color='primary'
          >
            {props.items.map(item => {
              return (
                <QTab
                  tabindex='1'
                  ripple={false}
                  class='q-pa-none q-mx-md mv-tab'
                  name={item.code}
                  label={item.label}
                />
              );
            })}
          </QTabs>
        </>
      );
    };
  },
});
